<template>
  <Main :type="'form'">
    <Title :title="'新建零元抽奖'" />

    <el-form ref="form" label-width="130px" :model="form">
      <el-form-item
        label="选择商品"
        prop="shopID"
        :rules="{ required: true, message: '请选择商品', trigger: 'blur' }"
      >
        <span>{{ shopName }}</span>
        &nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="dialogTableVisible = true"
          >去选择</el-button
        >
      </el-form-item>
      <el-form-item
        label="奖品价值"
        prop="money"
        :rules="{ required: true, message: '请输入奖品价值', trigger: 'blur' }"
      >
        <el-input
          v-model="form.money"
          class="form-input"
          size="medium"
          placeholder="请输入奖品价值"
        ></el-input>
      </el-form-item>
    </el-form>

    <Footer>
      <el-button plain type="primary" @click="submit">保 存</el-button>
      <el-button plain @click="$emit('out')">取 消</el-button>
    </Footer>

    <el-dialog
      title="选择商品"
      :visible.sync="dialogTableVisible"
      :before-close="closeSHOP"
    >
      <div class="diah">
        <p>商品名称</p>
        <el-input
          v-model="search"
          class="form-min-input"
          size="medium"
          placeholder="请输入名称"
        ></el-input>
        &nbsp;&nbsp;
        <el-button size="mini" type="primary" @click="getList">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </div>

      <Table :data="listData" :max-height="450">
        <el-table-column align="center" width="55">
          <template slot-scope="scope">
            <el-radio
              v-model="scope.row.radio"
              :label="1"
              @change="radioTag(scope.row.goods_id)"
            >
              <span style="display:none">dsd</span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          property="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column property="name" label="商品图片" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu +
                  scope.row.goods_cover.split(',')[0] +
                  $store.state.imgRotate
              "
              width="80px"
              height="80px"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品价格" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
              >￥{{ scope.row.low_goods_price }}</span
            >
            <span v-else
              >￥{{ scope.row.low_goods_price }} - ￥{{
                scope.row.up_goods_price
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          property="goods_stock"
          label="商品库存"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.radio !== 1"
              @click="seletGZ(scope.row.goods_id)"
            >
              选择规格
            </el-button>
          </template>
        </el-table-column>
      </Table>
      <el-pagination
        class="foot-operation-pagination"
        style="text-align: center;"
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
      <div slot="footer">
        <el-button type="primary" @click="submitSHOP">确 定</el-button>
        <el-button @click="closeSHOP">取 消</el-button>
      </div>
      <el-dialog
        :visible.sync="innerVisible"
        append-to-body
        :before-close="closeGZ"
      >
        <el-table
          :data="GZListData"
          tooltip-effect="dark"
          :stripe="true"
          height="500"
          header-row-class-name="list-table-header"
          row-class-name="list-table-row-one"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio
                v-model="scope.row.radio"
                :label="1"
                @change="radioGZTag(scope.row.sku_id)"
              >
                <span style="display:none">dsd</span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-if="skutype[0]"
            prop="sku_type_name[0]"
            :label="skutype[0]"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="skutype[1]"
            prop="sku_type_name[1]"
            :label="skutype[1]"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="skutype[2]"
            prop="sku_type_name[2]"
            :label="skutype[2]"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品库存" property="sku_stock" align="center">
          </el-table-column>

          <el-table-column
            label="价格"
            align="center"
            property="sku_price"
          ></el-table-column>
        </el-table>
        <div slot="footer">
          <el-button type="primary" @click="submitGZ">确 定</el-button>
          <el-button @click="closeGZ">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </Main>
</template>
<script>
import { GETGOODSSKU, SETPRIZE } from "../service";
import { GOODSLISTShop } from "@/service/shop";

export default {
  data() {
    return {
      dialogTableVisible: false,
      innerVisible: false,
      listData: [],
      shopName: "暂未选择商品",
      GZListData: [],
      GZID: "",
      GZnum: 1,
      skutype: [],
      form: {
        shopID: "",
        money: ""
      },
      search: "",
      totals: 0,
      pages: 1
    };
  },
  created() {
    this.getList();
  },

  methods: {
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          SETPRIZE({
            commodity_id: this.form.shopID,
            sku_id: this.GZID,
            money: this.form.money
          }).then(({ code, msg }) => {
            if (code === 200) this.$emit("out");
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    submitSHOP() {
      if (!this.GZID) return this.$message.error("请选择商品规格！");
      this.dialogTableVisible = false;
      let v = this.listData.filter(f => {
        return f.radio === 1;
      });

      this.form.shopID = v[0].goods_id;
      this.shopName = v[0].goods_name;
    },
    closeSHOP() {
      this.dialogTableVisible = false;
      this.GZID = "";
      this.form.shopID = "";
      this.shopName = "";
    },
    submitGZ() {
      this.innerVisible = false;
      this.GZnum = 0;
      let v = this.GZListData.filter(f => {
        return f.radio === 1;
      });
      this.GZID = v[0].sku_id;
    },
    closeGZ() {
      this.innerVisible = false;
      if (this.GZnum) this.GZID = "";
    },
    reset() {
      this.search = "";
      this.getList();
    },

    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      await GOODSLISTShop({
        goods_name: this.search,
        page: this.pages,
        pageshow: 10
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          data.list.forEach(ele => {
            this.form.shopID === ele.goods_id
              ? (ele.radio = 1)
              : (ele.radio = 2);
          });
          this.listData = data.list;
          this.totals = data.length;
        } else {
          this.$message.error(msg);
          this.listData = [];
        }
      });
    },
    async seletGZ(id) {
      this.innerVisible = true;
      this.GZListData = [];
      this.skutype = [];
      await GETGOODSSKU({
        goods_id: id,
        activity_type: 1,
        activity_id: 1
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          data.forEach(ele => {
            this.GZID === ele.sku_id ? (ele.radio = 1) : (ele.radio = 2);
            ele.sku_type_name = ele.sku_type_name.split(",");
          });
          this.GZListData = data;
          this.skutype = data[0].attr_names.split(",");
        } else {
          this.$message.error(msg);
        }
      });
    },
    radioTag(id) {
      this.listData.forEach(ele => {
        if (ele.goods_id === id) {
          ele.radio = 1;
        } else {
          ele.radio = 2;
        }
      });
    },
    radioGZTag(id) {
      this.GZListData.forEach(ele => {
        if (ele.sku_id === id) {
          ele.radio = 1;
        } else {
          ele.radio = 2;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.diah {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  p {
    display: inline-block;
    font-size: 16px;
    padding: 0 12px;
    font-weight: bold;
  }
}
</style>
